<template>
	<view class="project">
		<s-navBack title="创建工程" @goBack="goBack"></s-navBack>
		<u-row gutter="50">
			<u-col span="12">
				<u-form :model="projects">
					<view class="content">
						<u-form-item label="工程名称" label-width="140">
							<u-input v-model="projects.projectName" input-align="right" class="u-form-right" placeholder="请输入工程名称" placeholderStyle="color: #D9D9D9" />
						</u-form-item>
						<u-form-item label="工程地址" label-width="140" @right-icon-click="showclick" right-icon="arrow-down-fill" :right-icon-style="{fontSize: '20rpx'}">
							<u-input v-model="area" input-align="right"  @click="showclick" disabled="true" placeholder="请选择工程地址" placeholderStyle="color: #D9D9D9"  />
							<u-select v-model="showArea" child-name="children" value-name="code" label-name="name" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>
						</u-form-item>
						<u-form-item label="详细地址" label-width="140">
							<u-input v-model="projects.projectAddr" input-align="right" placeholder="请输入详细地址" placeholderStyle="color: #D9D9D9"  />
						</u-form-item>
					</view>
					<view class="content">
						<h3>建设单位</h3>
						<view class="lineImg">
							<image src="../static/images/line.png" mode=""></image>
						</view>
						<u-form-item label="单位名称" label-width="140">
							<u-input v-model="projects.companies[0].companyName" input-align="right" class="u-form-right" placeholder="请输入单位名称" placeholderStyle="color: #D9D9D9"  />
						</u-form-item>
						<u-form-item label="负责人" label-width="140">
							<u-input v-model="projects.companies[0].companyLink" input-align="right" placeholder="请输入负责人" placeholderStyle="color: #D9D9D9"  />
						</u-form-item>
					</view>
					<view class="content">
						<h3>施工单位</h3>
						<view class="lineImg">
							<image src="../static/images/line.png" mode=""></image>
						</view>
						<u-form-item label="单位名称" label-width="140">
							<u-input v-model="projects.companies[1].companyName" input-align="right" class="u-form-right" placeholder="请输入单位名称" placeholderStyle="color: #D9D9D9"  />
						</u-form-item>
						<u-form-item label="负责人" label-width="140">
							<u-input v-model="projects.companies[1].companyLink" input-align="right" placeholder="请输入负责人" placeholderStyle="color: #D9D9D9"  />
						</u-form-item>
					</view>
					<view class="content">
						<h3>监理单位</h3>
						<view class="lineImg">
							<image src="../static/images/line.png" mode=""></image>
						</view>
						<u-form-item label="单位名称" label-width="140">
							<u-input  v-model="projects.companies[2].companyName" input-align="right" class="u-form-right" placeholder="请输入单位名称" placeholderStyle="color: #D9D9D9" />
						</u-form-item>
						<u-form-item label="负责人" label-width="140">
							<u-input v-model="projects.companies[2].companyLink" input-align="right" placeholder="请输入负责人" placeholderStyle="color: #D9D9D9"  />
						</u-form-item>
					</view>
					<view class="content">
						<h3>设计单位</h3>
						<view class="lineImg">
							<image src="../static/images/line.png" mode=""></image>
						</view>
						<u-form-item label="单位名称" label-width="140">
							<u-input v-model="projects.companies[3].companyName" input-align="right" class="u-form-right" placeholder="请输入单位名称" placeholderStyle="color: #D9D9D9"  />
						</u-form-item>
						<u-form-item label="负责人" label-width="140">
							<u-input v-model="projects.companies[3].companyLink" input-align="right" placeholder="请输入负责人" placeholderStyle="color: #D9D9D9"  />
						</u-form-item>
					</view>
					<view class="content">
						<h3>勘察单位</h3>
						<view class="lineImg">
							<image src="../static/images/line.png" mode=""></image>
						</view>
						<u-form-item label="单位名称" label-width="140">
							<u-input v-model="projects.companies[4].companyName" input-align="right" class="u-form-right" placeholder="请输入单位名称" placeholderStyle="color: #D9D9D9"  />
						</u-form-item>
						<u-form-item label="负责人" label-width="140">
							<u-input v-model="projects.companies[4].companyLink" input-align="right" placeholder="请输入负责人" placeholderStyle="color: #D9D9D9"  />
						</u-form-item>
					</view>
				</u-form>
			</u-col>
			<view class="butList">
				<u-col span="6" class="btn1">
					<u-button shape="circle" plain @click="saveData">临时保存</u-button>
				</u-col>
				<u-col span="6" class="but2">
					<u-button class="but" type="primary" @click="buildProject" shape="circle">创建工程</u-button>
				</u-col>
			</view>
		</u-row>
		
		<!-- 模态框提示框 -->
		<u-modal v-model="showModel1" cancel-text="不保存" confirm-text="保存" :show-title="false" :content="contentModel" show-cancel-button="true" confirm-color="#FFFFFF" @confirm="confirmClick1" @cancel="cancelClick1"></u-modal>
		<u-modal v-model="showModel2" :show-title="false" :content="contentModel" show-cancel-button="true" confirm-color="#FFFFFF" @confirm="confirmClick2" @cancel="cancelClick2"></u-modal>
	  <!-- 提示框 -->
		<u-toast ref="uToast" /> 
		<!-- 遮罩层 -->
		<u-mask :show="maskShow"></u-mask>
	</view>
</template>

<script>
	export default {
		name: 'createProject',
		data() {
			return {
				showModel1: false, // 弹窗状态
				showModel2: false, // 弹窗状态
				contentModel: '', // 弹出框内容
				projects: {
					id: '', // 工程id
					projectName: '', //	工程名称	
					projectProvince: '', // 工程所属省份
					projectCity: '',	//	工程所属城市	
					projectArea: '', //	工程所属区县
					projectAddr: '', //	工程详细地址
					companies: [
						{
							companyLink: '', 	// 单位负责人
							companyName: '', //	单位名称	
							id: ''
						},
						{
							companyLink: '', 	// 单位负责人
							companyName: '', //	单位名称	
							id: ''
						},
						{
							companyLink: '', 	// 单位负责人
							companyName: '', //	单位名称	
							id: ''
						},
						{
							companyLink: '', 	// 单位负责人
							companyName: '', //	单位名称	
							id: ''
						},
						{
							companyLink: '', 	// 单位负责人
							companyName: '', //	单位名称	
							id: ''
						}
					]
			  },
				companyIdList: [], // 单位类型
				showArea: false, // 地区联动状态
				area: '', // 选中的地址
				list: [],
				maskShow: false, // 遮罩层
				backgrounds: {
					backgroundColor: '#3B83FE',
					color: '#FFFFFF'
				},
				backTrue: false, // 返回状态值
				saveTrue: false, // 临时保存状态
				dataLength: '' // 临时保存的数据
		  }
		},
		onLoad() {
			uni.showLoading({
			    title: '加载中'
			});
			this.maskShow = true
		},
		async created() {
			this.getProjectDraft() // 获取草稿信息
			this.getArea() // 获取县区数据列表
			this.getCompanyId() // 获取单位id
			setTimeout(() => {
				// console.log('初始长度',JSON.stringify(this.projects).length)
				let yy = JSON.stringify(this.projects).length
				this.dataLength = yy
			}, 300)
			
		},
		methods: {
			// 返回上一级
			goBack() {
				this.backTrue = true
			 if(JSON.stringify(this.projects).length == this.dataLength && this.saveTrue == false){
				 this.$navJump.navigateBack()
				} else if(JSON.stringify(this.projects).length != this.dataLength && this.saveTrue == false){
					this.showModel1 = true
					this.contentModel = '是否保存本次修改内容?'
				} else if(JSON.stringify(this.projects).length != this.dataLength && this.saveTrue == true){
					this.$navJump.navigateBack()
				} else {
					this.$navJump.navigateBack()
				}
			},
			// 获取工程草稿数据
			getProjectDraft() {
				let header = {
					"content-type":"application/x-www-form-urlencoded;charset=UTF-8"
				}
				this.$ajax.post({
					url: '/project-info/draft',
					header: header
				}).then(res => {
					console.log('草稿信息：', res)
					if(res.code == 200 && res.data) {
						this.projects = res.data
						this.dataSave = res.data
						if(this.projects.projectProvince) {
							this.area = this.projects.projectProvince + '-' + this.projects.projectCity + '-' + this.projects.projectArea
						}
					}
				})
			},
			// 地区联动
			showclick() {
				this.showArea = true
			},
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			// 选择地区返回的值
			confirm(e) {
				// console.log(e);
				this.area = e[0].label + '-' + e[1].label + '-' + e[2].label
				this.projects.projectProvince = e[0].label
				this.projects.projectCity = e[1].label
				this.projects.projectArea = e[2].label
			},
			// 获取地区列表
			getArea() {
				let header = {
					"content-type":"application/x-www-form-urlencoded;charset=UTF-8"
				}
				this.$ajax.get({
					url: '/blade-system/region/all',
					header: header
				}).then(res => {
					// console.log('地区：', res)
					this.list = res.data  
					uni.hideLoading();
					this.maskShow = false
				})
			},
			// 获取单位id
			getCompanyId(){
				let header = {
					"content-type":"application/x-www-form-urlencoded;charset=UTF-8"
				}
				this.$ajax.get({
					url: '/blade-system/dict-biz/tenant/dictionary',
					header: header,
					data: {
						code: 'company_type'
					}
				}).then(res => {
					if(res.code == 200) {
						this.companyIdList = res.data
						this.projects.companies[0].id = this.companyIdList[0].id
						this.projects.companies[1].id = this.companyIdList[1].id
						this.projects.companies[2].id = this.companyIdList[2].id
						this.projects.companies[3].id = this.companyIdList[3].id
						this.projects.companies[4].id = this.companyIdList[4].id
					}
				})
			},
			// 临时保存
			saveData() {
				// if(this.projects.projectName == '') {
				// 	this.$refs.uToast.show({
				// 		title: '工程名称不得为空！',
				// 		type: 'warning'
				// 	})
				// } else 
				if(this.projects.projectName || this.projects.projectCity || this.projects.projectAddr || this.projects.companies[0].companyLink || this.projects.companies[0].companyName || this.projects.companies[1].companyLink || this.projects.companies[1].companyName || this.projects.companies[2].companyLink || this.projects.companies[2].companyName || this.projects.companies[3].companyLink || this.projects.companies[3].companyName || this.projects.companies[4].companyLink || this.projects.companies[4].companyName ){
					// this.showModel1 = true
					// this.contentModel = '是否保存已填写内容?'
					this.confirmClick1()
				} else {
					this.$refs.uToast.show({
						title: '请填写内容后在进行保存！',
						type: 'warning'
					})
				}
				
			}, 
			// 选择临时保存取消按钮
			cancelClick1() {
				this.showModel1 = false
				if(this.backTrue == true) {
					this.$navJump.navigateBack()
				}
			},
			// 选择临时保存确定按钮
			confirmClick1(){
				this.saveTrue = true
				let header = {
					"content-type":"application/json;charset=UTF-8"
				}
				let dataList = {
					id: this.projects.id,
					projectName: this.projects.projectName,
					projectAddr: this.projects.projectAddr,
					projectArea: this.projects.projectArea,
					projectCity: this.projects.projectCity,
					projectProvince: this.projects.projectProvince,
					companies: this.projects.companies
				}
				this.$ajax.post({
					url: '/project-info/save',
					header: header,
					data: JSON.stringify(dataList)
				}).then(res => {
					if(res.code == 200) {
						this.showModel1 = false
						this.$refs.uToast.show({
							title: '内容保存成功！',
							type: 'success'
						})
						setTimeout(() => {
							let that = this
							if(that.backTrue == true) {
								that.$navJump.navigateBack()
							}
						}, 1000)
					}
				})
			},
			// 创建工程
			buildProject(){
				if(this.projects.projectName && this.projects.projectCity && this.projects.projectAddr && this.projects.companies[0].companyLink && this.projects.companies[0].companyName && this.projects.companies[1].companyLink && this.projects.companies[1].companyName && this.projects.companies[2].companyLink && this.projects.companies[2].companyName && this.projects.companies[3].companyLink && this.projects.companies[3].companyName && this.projects.companies[4].companyLink && this.projects.companies[4].companyName ){
					this.showModel2 = true
					this.contentModel = '工程创建后不可再修改，请确认是否创建？'
				} else {
					this.$refs.uToast.show({
						title: '请完善全部单位信息后再创建',
						type: 'error'
					})
				}
			}, 
			// 选择创建工程取消按钮
			cancelClick2() {
				this.showModel2 = false
			},
			// 选择创建工程确定按钮
			confirmClick2(){
				let header = {
					"content-type":"application/json;charset=UTF-8"
				}
				let dataList = {
					id: this.projects.id,
					projectName: this.projects.projectName,
					projectAddr: this.projects.projectAddr,
					projectArea: this.projects.projectArea,
					projectCity: this.projects.projectCity,
					projectProvince: this.projects.projectProvince,
					companies: this.projects.companies
				}
				this.$ajax.post({
					url: '/project-info/submit',
					header: header,
					data: JSON.stringify(dataList)
				}).then(res => {
					if(res.code == 200) {
						console.log(res.data)
						this.showModel2 = false
						this.$navJump.reLaunch('./createProjectSuccess?projectNum=' + JSON.stringify(res.data))
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.project {
		.content {

			background: #FFFFFF;
			padding: 0 30rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			h3 {
				color: #262626;
				font-size: 30rpx;
				font-weight: 600;
				padding-top: 20rpx;
			}
			.lineImg {
				margin-top: -30rpx;
				image {
					width: 120rpx;
					height: 9.5rpx;
				}
			}
		}
		.butList {
			margin: 20rpx 0 40rpx;
			.btn1 {
				/deep/.u-btn--default {
					border-color: #3B85FE!important;
					color: #3B85FE!important;
					margin: 50rpx 0 80rpx;
				}
			
			}
			.but2 {
				/deep/.u-btn--primary{
					background:linear-gradient(to right ,#3B85FE, #3BC0FE)!important;
					margin: 50rpx 0 80rpx;
				}
			}
		}
	}
	.content:first-child {
		margin-top: 110rpx;
	}

	/* X、XS机型的媒体查询 */
	@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
		.content:first-child {
			margin-top: 145rpx;
		}
	}
	/* XS MAX机型媒体查询 */
	@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3){
		.content:first-child {
			margin-top: 145rpx;
		}
	}
	/* XR机型媒体查询 */
	@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2){
		.content:first-child {
			margin-top: 145rpx;
		}
	}
</style>
